import React from 'react';
import { NavLink } from 'react-router-dom';
import './index.less';
import http from 'libs/http'
import { getPlatformType } from 'libs/utils';
import cooperative_agency from 'images/cooperative_agency.jpg';


class HeaderNav extends React.Component {
  constructor(props) {
    super(props)
    const defaultNavList = [
      { name: '首页', path: '/home' },
      { name: '龙英语', path: '/introduce/long_english', padPath: '/introduce/long_english_pad' },
      { name: '龙编程', path: '/introduce/long_program', padPath: '/introduce/long_program_pad' },
      { name: '合作机构', path: '#' },
    ]
    const { navList } = props
    this.state = {
      isPad: false,
      navList: navList || defaultNavList
    }
  }

  componentDidMount() {
    this.checkRoleType()
    const userAgent = navigator.userAgent
    const isPad = /pad/i.test(userAgent)
    this.setState({ 
      isPad,
    })
  }

  checkRoleType = () => {
    http.get('/role/getRole').then(res => {
      res.data && this.setState({
        authority: res.data
      })
    })
  }

  avoidTheLogin = (role) => () => {
    let path = ''
    if(role === 'STUDENT') {
      path = '/student/password_login'
    }else if (role === 'TEACHER') {
      path = `/teacher/register${getPlatformType() ? '_pad' : ''}`
    }
    const { history } = this.props
    const { authority } = this.state
    const url = authority === role ? `/${role.toLowerCase()}_center` : path
    history.push(url)
  }

  render() {
    const { isPad, authority, navList } = this.state
    return (
      <div className="header-container">
        <div className="header" style={{ width: `${isPad ? '950px' : '1200px'}`}}>
          <i className="logo"></i>
          <ul className="nav-list">
            {
              navList.map(nav => (
                <li key={nav.path}><NavLink to={ (isPad && nav.padPath) ? nav.padPath : nav.path }><i className="triangle"></i>{nav.name}</NavLink></li>
              ))
            }
            <li><img style={{ height: 60, marginTop: 10, marginLeft: 20 }} src={cooperative_agency} /></li>
          </ul>
          <div className="header-right">
            <p className="tel"><i></i><span>400-0192-516</span></p>
            <span className={`login ${authority==='STUDENT' ? 'active' : ''}`} onClick={this.avoidTheLogin('STUDENT')}>学员登录</span>
            <span className={`login ${authority==='TEACHER' ? 'active' : ''}`} onClick={this.avoidTheLogin('TEACHER')}>Teacher</span>
          </div>
        </div>
      </div>
    );
  }
};

export default HeaderNav;
